<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>await制作加载进度条</title>
    <style>
      div {
        margin: 50px auto;
        width: 0px;
        height: 50px;
        background: #8e44ad;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="loading">0%</div>
  </body>
  <script src="js/ajax.js"></script>
  <script>
    function query(name) {
      return ajax(`http://localhost:80/php/user.php?name=${name}`);
    }
    async function loadUser(users) {
      for (let i = 0; i < users.length; i++) {
        let user = await query(users[i]);
        let progress = ((i + 1) / users.length) * 100;
        loading.style.width = progress + "%";
        loading.innerHTML = Math.round(progress) + "%";
      }
    }
    loadUser(["后盾人", "李四", "赵六"]);
  </script>
</html>
